$(document).ready(function() {
	// AppView cover whole body. That's why we set
	// el is body
	Invitesq.HomeView = Backbone.View.extend({
		el : "#body",
		
		initialize : function() {
			_.bindAll(this, 'render', 'fetchEvents');
			// Call reset to bind data to collection
			if (Invitesq.eventData) 
				Invitesq.eventCollection.reset(Invitesq.eventData) ;
			this.render();
		},
		
		events : {
			// simulate an event of clicking a category 
			"click #fetch-btn" : "fetchEvents"
		},
		
		fetchEvents : function() {
			Invitesq.eventCollection.fetch();
			/*
			var view = this;
			// Dump data to array 
			$.post("/api/event/getList/", {"limit":9}, function(eventData){
				//Use pure js function if want to see json data in DOM
				//Invitesq.AddScript('body','Invitesq.eventData = ' + eventData + ';') ;
				
				// Just use make from Backbone view otherwise.
				var script = view.make("script", {}, 'Invitesq.eventData = ' + eventData + ';');
				$(view.el).append(script);
				
				// Reset event collection
				if (Invitesq.eventData && view.eventCollection) {
					view.eventCollection.reset(models=Invitesq.eventData);
					view.render();
				} 
				
			});*/
		},
		
		render : function() {
			var $container = this.$("#container");
			
			if (Invitesq.eventCollection) 
				Invitesq.eventCollection.each(function(eventModel){
					eventView = new Invitesq.EventThumbView({
						model: eventModel
					});
					$container.append(eventView.render().$el);
				});
			
			$container.imagesLoaded( function(){
				$container.masonry({
					itemSelector: '.event',
					isAnimated: true,
					isResizable: false,
					animationOptions: {
					  duration: 300
					}
				});
			});
			return this;
			
		},
	});

	Invitesq.homeView = VM.createView("homeView", function() {
		return new Invitesq.HomeView();
	});
});
